import React, { PureComponent } from "react";
import { Card, Spin, Table } from "antd";
import { connect } from "dva";
import PageLayout from "components/pageconlayout/PageLayout";
import dynamic from "umi/dynamic";
import { delay } from "utils/comm";
import { getMenuRouter } from "components/layouts/menuFn";
import {
  emptyParams,
  getColumns,
  getPageProps,
  handlePageChange,
  initData,
  handleTableChange,
} from "./ruleTableHelper";
import AdvancedFilter from "../AdvancedFilter";
import { initAppListData } from "../flowlist/Tools/serviceHelper";
import styles from "./RuleList.less";

const Catalogue = dynamic({ loader: async () => {
  await delay(100);
  return import("components/catalogue/Catalogue");
} });

@connect(({
            appListMenu, FlowMonitor, loading, Public,
          }) => ({
  appListMenu, FlowMonitor, loading,
  focusApp: appListMenu.focusApp,
  menuDataList: Public.menuDataList,
  resourceList: Public.resourceList,
}))
class RuleList extends PureComponent {
  state = {
    selectedKeys: [],
    page: {
      pageNum: 1,
      pageSize: 10,
    },
  };

  getColumns = getColumns.bind(this);

  getMenuRouter = getMenuRouter.bind(this);

  getPageProps = getPageProps.bind(this);

  handlePageChange = handlePageChange.bind(this);

  handleTableChange = handleTableChange.bind(this);

  initAppListData = initAppListData.bind(this);

  initData = initData.bind(this);

  searchParams = { ...emptyParams };

  componentDidMount() {
    this.initData();
  }

  componentDidUpdate(preProps) {
    const { focusApp } = this.props;
    const { focusApp: preFocusApp } = preProps;
    if (preFocusApp.id && `${preFocusApp.id || 0}` !== `${focusApp.id || 0}`) {
      // 应用切换更新页面数据
      this.resetPageData();
    }
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: "FlowMonitor/clearData" });
  }

  getFormThis = (formThis, type = "advancedFilter") => {
    if (type === "advancedFilter") {
      this.filterForm = formThis;
    } else if (type === "queryExtra") {
      this.queryExtraForm = formThis;
    }
  };

  resetPageData = () => {
    const { dispatch } = this.props;
    this.searchParams = { ...emptyParams };
    dispatch({ type: "FlowMonitor/clearData" });
    this.setState({
      page: { pageNum: 1, pageSize: 10 },
    });
    if (this.filterForm) this.filterForm.handleReset();
    if (this.queryExtraForm) this.queryExtraForm.handleReset();
    this.initAppListData();
  };

  // 获取查询参数
  getQueryParam = () => {
    const { page: { pageNum, pageSize } } = this.state;
    return { ...this.searchParams, pageNum, pageSize };
  };

  // 搜索
  handleSearch = () => {
    const { page } = this.state;
    if (this.filterForm) this.filterForm.handleSubmit();
    if (this.queryExtraForm) this.queryExtraForm.handleSubmit();
    this.setState({ page: { ...page, pageNum: 1 } }, () => {
      this.initData();
    });
  };

  /* 我的流程单选择 */
  handleTypeSelect = (selectedKeys = [], e, preId, nomalSelectedKeys) => {
    const newSelectkeys = nomalSelectedKeys || selectedKeys;
    // console.log(e.node.props.isLeaf)
    if (!(selectedKeys && selectedKeys[0].length > 0)) return;
    if (e.node.props.isLeaf) { // 子节点
      this.searchParams = { ...this.searchParams, busiId: selectedKeys[0], appId: "" };
    } else {
      this.searchParams = { ...this.searchParams, appId: selectedKeys[0], busiId: "" };
    }
    if (this.filterForm) this.filterForm.handleReset();
    if (this.queryExtraForm) this.queryExtraForm.handleReset();
    this.setState({ selectedKeys: newSelectkeys });
    this.handleSearch();
  };

  // 查询参数改变
  handleParamsChange = (newparams) => {
    this.searchParams = { ...this.searchParams, ...newparams };
  };


  render() {
    const { loading, dispatch, FlowMonitor, appListMenu } = this.props;
    const { page: { pageNum, pageSize }, selectedKeys } = this.state;
    const {
      RuleActionData = [], RuleTotalCount = 0,
    } = FlowMonitor;
    const { appListMenuData = [] } = appListMenu;
    const menuListLoading = loading.effects["appListMenu/getAppListData"];
    const processLoading = loading.effects["FlowMonitor/getRuleActionList"];
    return (
      <div className={styles.root}>
        <PageLayout
          leftContent={
            <Card
              title='应用业务目录'
              style={{ width: "100%", height: "100%" }}
              bodyStyle={{ minHeight: window.innerHeight - 64 - 16 - 16 - 48 - 104 - 10 }}
            >
              <Spin spinning={menuListLoading} delay={300}>
                <Catalogue
                  CatalogueData={appListMenuData}
                  treeNodeSelect={this.handleTypeSelect}
                  selectedKeys={selectedKeys}
                  // defaultSelectedKeys={[this.processType]}
                />
              </Spin>
            </Card>
          }
          rightContent={
            <Card
              className={styles.rightCon}
              title={null}
              bodyStyle={{ minHeight: window.innerHeight - 64 - 16 - 16 - 48 - 104 }}
              style={{ width: "100%" }}
            >
              <AdvancedFilter
                dispatch={dispatch}
                onSearch={this.handleSearch}
                handleParamsChange={this.handleParamsChange}
                visible="true"
                getFormThis={this.getFormThis}
                renderType="rule"
              />
              <Table
                rowKey="id"
                className={styles.listcon}
                columns={this.getColumns()}
                dataSource={RuleActionData}
                loading={processLoading}
                pagination={this.getPageProps(pageNum, pageSize, RuleTotalCount)}
                onChange={this.handleTableChange}
              />
            </Card>
          }
        />
      </div>
    );
  }
}
export default RuleList;